<template>
  <div>
    <common-head title="搜索结果"></common-head>
    <div class="warp">
      <ul class="lists">
        <li @click="switchTab(0)" :class="{active: active === 0}">综合</li>
        <li @click="switchTab(1)" :class="{active: active === 1}">销量</li>
        <li @click="switchTabPrice(2)" :class="['price', {active: active === 2}]">
          <span>价格</span>
          <div :class="['angle', 'up', {
            active:active ===2 && priceUpDown === 0
          }]"></div>
          <div :class="['angle', 'down', {
            active:active ===2 && priceUpDown === 1
          }]"></div>
        </li>
        <li @click="switchTab(3)" :class="{active: active === 3}">最新</li>
      </ul>
    </div>
    <!-- 商品数据 -->
        <div class="flower">
          <van-card
          @click="clickItem(item.id, index)"
          v-for="(item, index) in items"
          :key="item.id"
            :price="item.minPrice"
            :desc="item.characteristic? 'item.characteristic': '暂无描述'"
            :title="item.name"
            :thumb="item.pic"
          >
          <template #footer>
            <van-icon size="20" color="red" name="shopping-cart" />
          </template>
        </van-card>
    </div>
    <!-- /h 商品数据 -->
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { fetchItems } from 'api'
export default {
  data () {
    return {
      active: 0,
      priceUpDown: 0, // 0为升序 1为降序
      items: []
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    clickItem (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    fetchItems () {
      fetchItems({
        k: this.$route.query.keyWord,
        orderBy: this.orderBy // 依赖计算属性，这个this.orderBy,就是下方依赖
      }).then(res => {
        // console.log(res)
        this.items = res.data.data.result
      })
    },
    switchTabPrice () {
      /*
      先判断 从其他区切换过来 为价格的升序0
      在判断升序降序切换
      */
      if (this.active !== 2) {
        this.active = 2
        this.priceUpDown = 0
      } else {
        if (this.priceUpDown === 0) {
          this.priceUpDown = 1
        } else {
          this.priceUpDown = 0
        }
      }
      this.fetchItems()
    },
    // 切换列表 价格，销量 综合啥的
    switchTab (index) {
      this.active = index
      this.fetchItems()
    }
  },
  computed: {
    orderBy () {
      let order = ''
      /*
      依赖active和priceUpDown
      */
      switch (this.active) {
        case 0:
          // 综合
          order = ''
          break
        case 1:
          // 销量
          order = 'ordersUp'
          break
        case 2:
          // 价格
          if (this.priceUpDown === 0) {
            order = 'priceUp'
          } else {
            order = 'priceDown '
          }
          break
        case 3:
          // 最新
          order = 'addedDown '
          break
        default:
          break
      }
      return order
    }
  },
  name: 'cart',
  components: { CommonHead }
}
</script>

<style lang="scss" scoped>
.warp{
  padding-top: 46px;
  .lists{
    position: fixed;
    left: 0;
    top: 16px;
    width: 100%;
    z-index: 10;
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    line-height: 50px;
    background-color: #fff;
    li.active{
      color: red;
    }
    .price{
      position: relative;
      .angle{
        width: 0;
        height: 0;
        border: 4px solid transparent;
        position: absolute;
        right: -13px;
        &.up{
          border-bottom-color: #333;
          bottom: 25px;
          &.active{
            border-bottom-color: red;
          }
        }
        &.down{
          border-top-color: #333;
          bottom: 15px;
          &.active{
             border-top-color: red;
          }
        }
      }
    }
  }
}
.flower{
  padding-top: 50px;
    /deep/.van-card{
      padding: 12px 16px;
      .van-card__thumb {
      height: 100px;
      margin-right: 26px;
      }
      .van-card__price{
        color: red;
        font-size: 16px;
      }
      .van-card__title{
        margin-bottom: 5px;
        font-size: 14px;
        color: #000;
      }
      .van-card__header{
        margin-top: 5px;
      }
    }
  }
</style>
